<template>
	<view class="particulars">
		<view class="header">
			<view class="main">
				<view class="box">
					<view class="content">
						<view class="img">
							<image :src="d.img"></image>
						</view>
						<view class="text">
							<view class="title">{{ d.title }}</view>
							<view class="time">{{ d.time }}</view>
						</view>
					</view>
					<view class="btn">
						<view class="btn1" v-if="d.order.order_state == 30 && d.order_status.refund_state == 0 && d.order_status.lock_state==0"
						 @tap="gotoQuestion(d)">我有疑问</view>
						<view class="btn2" v-if="d.btn" @tap="btn(d)">{{ d.btn }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sweep">
			<view class="title">房间信息</view>
			<view class="room">{{ d.order.room_no }}{{ d.order.room_type }} {{ d.order.storey }}楼</view>
			<view class="cost">{{ d.order.roomtype }} {{d.service_info.name}} {{ d.order.amount }}元</view>
			<view class="bg"></view>
			<view class="bommon">
				<view class="img">
					<image src="/static/icon/time.png"></image>
				</view>
				<view class="text">预约到店：</view>
				<view class="time">{{ d.time1 }}</view>
			</view>
		</view>
		<view class="bg"></view>
		<view class="order_info">
			<view class="title">订单信息</view>
			<view class="item">
				订单编号：
				<view class="text" v-if="d.order.order_sn">{{ d.order.order_sn }}</view>
			</view>
			<view class="item" v-if="d.order.order_state == 0">
				取消时间：
				<view class="text">{{ d.time2 }}</view>
			</view>
			<view class="item" v-if="d.time7">
				评价时间：
				<view class="text">{{ d.time7 }}</view>
			</view>
			<view class="item" v-if="d.order.order_state >= 40">
				完成时间：
				<view class="text">{{ d.time6 }}</view>
			</view>
			<view class="item" v-if="d.order.order_state >= 30">
				打扫时间：
				<view class="text">{{ d.time5 }}</view>
			</view>
			<view class="item" v-if="d.time4">
				到店时间：
				<view class="text">{{ d.time4 }}</view>
			</view>
			<view class="item" v-if="d.order.order_state >= 20">
				接单时间：
				<view class="text">{{ d.time3 }}</view>
			</view>
			<view class="item" v-if="d.order.order_state >= 10">
				发布时间：
				<view class="text">{{ d.time2 }}</view>
			</view>
		</view>
		<view class="bg" v-if="d.order_status.cname"></view>
		<view class="userCleaner" v-if="d.order_status.cname">
			<view class="title">服务人员</view>
			<view class="user_box">
				<view class="left">
					<view class="left_item">
						<image src="/static/order/name.png"></image>
						<view class="text">{{ d.order_status.cname }}</view>
					</view>
					<view class="left_item">
						<image src="/static/order/phone.png"></image>
						<view class="text">{{ d.cleanInfo.phone }}</view>
					</view>
				</view>
				<view class="user_btn" @tap="lookCleaner(d)">查看详情</view>
			</view>
		</view>
		<!-- 弹层 -->
		<layer v-if="layerShow">
			<view slot="text1">提示</view>
			<view slot="text2">确认取消订单么？</view>
			<view slot="btn1" @tap="layerClose">取消</view>
			<view slot="btn2" @tap="layerFinish">确定</view>
		</layer>
	</view>
</template>

<script>
	let flag = false;
	import layer from '@/components/layer/layer.vue';
	export default {
		data() {
			return {
				layerShow: false
			}
		},
		props: ['d'],
		components: {
			layer
		},
		methods: {
			lookCleaner(e) {
				let id = e.cleanInfo.id;
				uni.navigateTo({
					url: '/pages/hotel/cleaner/cleaner?id=' + id
				});
			},
			gotoQuestion(e) {
				uni.navigateTo({
					url: '/pages/hotel/service/question1?id=' + e.order_status.id
				});
			},
			/**
			 * 蒙层返回完成
			 */
			layerFinish() {

			},
			/**
			 * 关闭蒙层
			 */
			layerClose() {
				this.layerShow = false;
				flag = false;
			},
			/**
			 * 打开蒙层
			 */
			openlayer(callback) {
				this.layerShow = true;
				this.layerFinish = () => {
					this.layerClose();
					callback();
				}
			},
			btn(e) {
				console.log(e);
				// if(e.order.order_state == 0){
				// 	uni.navigateTo({
				// 		url: '/pages/hotel/myorder/refund?id=' + e.id
				// 	});
				// 	return;
				// }
				if (flag) {
					return;
				}
				flag = true;
				if (e.order.order_state == 10 || e.order.order_state == 20) {
					this.openlayer(() => {
						this.req({
								url: 'both/cancelOrder',
								method: 'GET',
								data: {
									position: 2,
									uid: this.isLogin().id,
									id: e.order.id
								}
							},
							res => {
								if (res.data.status == 1) {
									uni.$emit('order', e.order.id);
									this.showToast('取消成功');
									setTimeout(() => {
										uni.navigateBack();
									}, 1000);
									flag = false;
									return;
								}
								uni.showToast({
									title: res.data.message
								});
								flag = false;
							}
						);
					})
					return;
				}
				if (e.order.order_state == 30) {
					this.req({
							url: 'both/finishOrder',
							method: 'GET',
							data: {
								id: e.order_status.order_id
							}
						},
						res => {
							if (res.data.status == 1) {
								uni.$emit('order', e.order.id);
								this.showToast('已完成');
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
								flag = false;
								return;
							}
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
							flag = false;
						}
					);
					return;
				}

				if (e.order.order_state == 40) {
					if (e.evaluate * 1 == 0) {
						let d = {};
						d.hotel_id = e.order.hid;
						d.clean_id = e.order_status.cid;
						d.order_id = e.order_status.order_id;
						d.order_status_id = e.order_status.id;
						let data = JSON.stringify(d);
						uni.navigateTo({
							url: '/pages/hotel/service/evaluate?data=' + data
						});
						flag = false;
						return;
					}
					let title1 = e.order.room_no + e.order.room_type + ' ' + e.order.storey + '楼'
					let title2 = e.order.roomtype + e.order.amount + '元'
					uni.navigateTo({
						url: '/pages/hotel/myorder/evaluate?id=' + e.order_status.order_id + '&title1=' + title1 + '&title2=' + title2
					});
					flag = false;
					return;
				}
			}
		}
	};
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>

<style scoped lang="scss">
	.particulars {
		width: 750upx;
		padding-top: var(--status-bar-height);
		margin-top: 86upx;
		height: auto;

		color: #333333;

		.header {
			width: 100%;
			box-sizing: border-box;
			height: 240upx;
			background-color: #3595f9;
			padding: 8upx 24upx 40upx 24upx;

			.main {
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.box {
					width: 586upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.content {
						display: flex;
						align-items: center;

						.img {
							width: 80upx;
							height: 80upx;
							background-color: #3595f9;
							border-radius: 50%;
							margin-right: 18upx;

							image {
								width: 80upx;
								height: 80upx;
								border-radius: 50%;
								vertical-align: top;
							}
						}

						.text {
							.title {
								font-size: 28upx;
								line-height: 46upx;
							}

							.time {
								font-size: 20upx;
								line-height: 38upx;
								color: #999999;
							}
						}
					}

					.btn {
						font-size: 24upx;
						text-align: center;
						line-height: 60upx;

						.btn1 {
							width: 160upx;
							height: 60upx;
							border-radius: 8upx;
							border: solid 1upx #e5e5e5;
							color: #999999;
						}

						.btn2 {
							width: 160upx;
							height: 60upx;
							border-radius: 8upx;
							border: solid 1upx #3595f9;
							color: #3595f9;
							margin-top: 20upx;
						}
					}
				}
			}
		}

		.sweep {
			background: #fff;
			width: 100%;
			padding: 18upx 24upx 38upx 24upx;
			box-sizing: border-box;
			height: 314upx;

			.title {
				font-size: 32upx;
				line-height: 62upx;
				font-weight: bold;
			}

			.room {
				font-size: 28upx;
				line-height: 58upx;
			}

			.cost {
				font-size: 30upx;
				line-height: 60upx;
			}

			.bg {
				width: 702upx;
				height: 1upx;
				background-color: #e5e5e5;
				transform: scaleY(0.5);
			}

			.bommon {
				display: flex;
				align-items: flex-end;
				height: 52upx;

				.img {
					width: 30upx;
					height: 30upx;
					margin-right: 16upx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						vertical-align: top;
					}
				}

				.text {
					font-size: 24upx;
					color: #999999;
				}

				.time {
					font-size: 24upx;
					color: #999999;
				}
			}
		}

		.bg {
			width: 750upx;
			height: 20upx;
			background-color: #f0f0f0;
		}

		.order_info {
			background: #fff;
			width: 100%;
			padding: 18upx 24upx 48upx 24upx;
			box-sizing: border-box;
			height: auto;

			.title {
				font-size: 32upx;
				line-height: 62upx;
				font-weight: bold;
			}

			.item {
				display: flex;
				font-size: 28upx;
				line-height: 58upx;

				.text {
					color: #999999;
				}
			}
		}

		.userCleaner {
			background: #fff;
			width: 100%;
			height: 246upx;
			padding: 15upx 24upx 35upx 24upx;
			box-sizing: border-box;
			height: auto;

			.title {
				font-size: 32upx;
				line-height: 82upx;
				font-weight: bold;
			}

			.user_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					line-height: 58upx;
					font-size: 28upx;

					.left_item {
						display: flex;
						align-items: center;

						image {
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
							display: block;
						}

						.text {
							vertical-align: middle;
						}
					}
				}

				.user_btn {
					width: 160upx;
					height: 60upx;
					border-radius: 8upx;
					color: #3595f9;
					font-size: 24upx;
					text-align: center;
					line-height: 60upx;
					border: solid 1upx #3595f9;
				}
			}
		}
	}
</style>
